import React, { Component } from 'react';
import { Layout, Icon, Menu, Modal, Input, message } from 'antd';
import history from './history';
import fetchRequest from '../../fetch/fetchRequest';

const { Header } = Layout;
const SubMenu = Menu.SubMenu;

export default class HeaderCustom extends Component {
    constructor(props) {
        super(props);
        this.state = {
            collapsed: props.collapsed,
            visible: false
        }
        this.logout = this.logout.bind(this);
    }
    componentDidMount() {
        const body = { username: this.props.username }
        // 获取对应用户
        fetchRequest.fetchR('firstMoney/username', 'POSt', body)
            .then((response) => {
                this.setState({
                    userId: response.id,
                    password: response.password
                })
            }).catch((err) => {
                console.log(err)
            });
    }
    componentWillReceiveProps(nextProps) {
        this.onCollapse(nextProps.collapsed);
    }
    onCollapse = (collapsed) => {
        this.setState({
            collapsed,
        });
    };
    logout() {
        localStorage.removeItem("mspa_user");
        history.push('/login');
    }

    // 展示修改密码的弹框
    showModal = () => {
        this.setState({
            visible: true
        })
    }
    // 确认弹框（修改密码）
    handleOk = (e) => {
        const { newPassword, userId } = this.state;
        const { username } = this.props;
        const body = {
            username,
            password: newPassword
        }
        // 更新用户
        fetchRequest.fetchR(`users/${userId}`, 'PUT', body)
            .then((response) => {
                if (response.error !== undefined) {
                    message.error('密码更新失败！')
                } else {
                    message.success('密码更新成功！')
                }
            }).catch((err) => {
                message.error('密码更新失败！')
            });
        this.setState({
            visible: false,
        });
    }
    // 取消弹框（取消密码修改）
    handleCancel = (e) => {
        this.setState({
            visible: false,
        });
    }
    // 密码框的值得变化
    handleChange = (e) => {
        this.setState({
            newPassword: e.target.value
        })
    }

    render() {
        return (
            <Header style={{ background: '#fff', padding: 0 }} className="header">
                <Icon
                    className="trigger"
                    type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                    onClick={this.props.toggle}
                />
                <Menu
                    mode="horizontal"
                    style={{ lineHeight: '64px', float: 'right' }}
                >
                    <SubMenu
                        title={<span>
                            <Icon type="user" style={{ fontSize: 16, color: '#1DA57A' }} />{this.props.username}
                        </span>}
                    >
                        <Menu.Item key="password" style={{ textAlign: 'center' }}>
                            <span onClick={this.showModal}>修改密码</span>
                        </Menu.Item>
                        <Menu.Item key="logout" style={{ textAlign: 'center' }} className="logout">
                            <span onClick={this.logout}>退出登录</span>
                        </Menu.Item>
                    </SubMenu>
                </Menu>
                <Modal
                    title="密码修改"
                    okText="修改"
                    cancelText="取消"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                >
                    <span style={{ paddingLeft: 85 }}>
                        密码：<Input type='password' style={{ width: 250 }} onChange={this.handleChange} defaultValue={this.state.password} />
                    </span>
                </Modal>
            </Header>
        )
    }
} 